<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="course"
        style="width: 100%">
        <el-table-column
          label="标题"
          prop="name"          >
        </el-table-column>
        <!-- <el-table-column
          label="课程图片"
          prop="course_img"          >
        </el-table-column> -->
        <el-table-column
          label="是否免费"
          prop="course_type"          >
          <template slot-scope="scope">
            <p>{{scope.row.course_type}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="是否上架"
          prop="status"          >
          <template slot-scope="scope">
            <p>{{scope.row.status}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="分类"
          prop="course_category"          >
        </el-table-column>
        <el-table-column
          label="简介"
          prop="brief"          >
        </el-table-column>
        <!-- <el-table-column
          label="课件地址"
          prop="attachment_path"          >
        </el-table-column> -->
        <el-table-column
          label="学生数量"
          prop="students"          >
        </el-table-column>
        <el-table-column
          label="章节时长"
          prop="chapter_section"          >
        </el-table-column>
        <el-table-column
          label="原价"
          prop="price"          >
        </el-table-column>
        <el-table-column
          label="最低价"
          prop="minprice"          >
        </el-table-column>
        <el-table-column
          label="优惠券"
          prop="coupons"   :formatter="displayCoupons" show-overflow-tooltip>
        </el-table-column>
        <!-- <el-table-column
          label="介绍视频url"
          prop="video_url"          >
        </el-table-column> -->
        <!-- <el-table-column
          label="课程介绍"
          prop="introduce"          >
        </el-table-column> -->
        <el-table-column
          label="老师"
          prop="teacher.name"          >
        </el-table-column>
        <el-table-column
          label="排序"
          prop="order"          >
        </el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="goChapter(scope.row.id)" size="small">查看章节</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog width="80%" title="编辑课程" :visible.sync="editing" :close-on-click-modal = "false">
        <el-form ref="form" :model="editcourse">
          <el-form-item label="标题">
            <el-input  v-model="editcourse.name"></el-input>
          </el-form-item>
          <el-form-item label="课程图片">
            <el-input type="textarea" v-model="editcourse.course_img"></el-input>
          </el-form-item>
          <el-form-item label="是否免费">
            <el-switch v-model="editcourse.course_type"></el-switch>
          </el-form-item>
          <el-form-item label="是否上架">
            <el-switch v-model="editcourse.status"></el-switch>
          </el-form-item>
          <el-form-item label="分类">
            <el-input v-model="editcourse.course_category"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input type="textarea" v-model="editcourse.brief"></el-input>
          </el-form-item>
          <el-form-item label="课件地址">
            <el-input type="textarea" v-model="editcourse.attachment_path"></el-input>
          </el-form-item>
          <el-form-item label="学生数量">
            <el-input v-model="editcourse.students"></el-input>
          </el-form-item>
          <el-form-item label="章节时长">
            <el-input v-model="editcourse.chapter_section"></el-input>
          </el-form-item>
          <el-form-item label="原价">
            <el-input v-model="editcourse.price"></el-input>
          </el-form-item>
          <el-form-item label="最低价">
            <el-input v-model="editcourse.minprice"></el-input>
          </el-form-item>
          <el-form-item label="优惠券">
            <el-input type="textarea" v-model="editcourse.coupons"></el-input>
          </el-form-item>
          <el-form-item label="介绍视频url">
            <el-input type="textarea" v-model="editcourse.video_url"></el-input>
          </el-form-item>
          <el-form-item label="老师">
            <el-input v-model="editcourse.teacher_id"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="editcourse.order"></el-input>
          </el-form-item>
          <el-form-item label="课程介绍">
            <v-md-editor v-model="editcourse.introduce" width="400px" height="800px"></v-md-editor>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
            <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog >
      <el-button style="margin-top:20px" type="primary" @click="addCourse">
        新增
      </el-button>
    </Panel>
  </template>
  <script>
    import api from '../../api.js'

    export default {
      name: 'course',
      data () {
        return {
          course: [],
          editcourse: {},
          editing: false,
          adding: false
        }
      },
      mounted () {
        this.getCourseList()
      },
      methods: {
        getCourseList () {
          api['getCourse']().then((res) => {
            this.course = res.data.data
            console.log(this.course)
          }).catch()
        },
        handleEdit (index, row) {
          this.editing = true
          this.editcourse['id'] = this.course[index].id
          this.editcourse['name'] = this.course[index].name
          this.editcourse['course_img'] = this.course[index].course_img
          this.editcourse['course_type'] = this.course[index].course_type
          this.editcourse['course_category'] = this.course[index].course_category
          this.editcourse['status'] = this.course[index].status
          this.editcourse['brief'] = this.course[index].brief
          this.editcourse['attachment_path'] = this.course[index].attachment_path
          this.editcourse['students'] = this.course[index].students
          this.editcourse['chapter_section'] = this.course[index].chapter_section
          this.editcourse['price'] = this.course[index].price
          this.editcourse['minprice'] = this.course[index].minprice
          this.editcourse['order'] = this.course[index].order
          this.editcourse['coupons'] = JSON.stringify(this.course[index].coupons)
          this.editcourse['teacher_id'] = this.course[index].teacher.id
          this.editcourse['video_url'] = this.course[index].video_url
          this.editcourse['introduce'] = this.course[index].introduce
          this.editcourse = JSON.parse(JSON.stringify(this.editcourse))
          console.log(index, row.title)
        },
        onSubmit () {
          this.editcourse['coupons'] = JSON.parse(this.editcourse['coupons'])
          let params = this.editcourse
          console.log('par', params)
          if (!this.adding) {
            api['editCourse'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getCourseList()
            }).catch()
          } else {
            api['addCourse'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getCourseList()
            }).catch()
          }
        },
        displayCoupons (row) {
          let cou = row.coupons
          var s = ''
          for (var i = 0; i < cou.length; i++) {
            s = s + cou[i]['totprice'].toString() + ' - ' + cou[i]['decprice'].toString() + ' ;\n'
          }
          console.log(s)
          return s
        },
        addCourse () {
          this.editing = true
          this.adding = true
          this.editcourse = {coupons: '[{"decprice":yy,"totprice":xx},{"decprice":xx,"totprice":yy}]'}
        },
        goChapter (id) {
          console.log('iddd', id)
          this.$router.push({name: 'chapter', query: {course_id: id}})
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  